<template>
	<view v-if="info.orderId" class="box" :style="theme">
		<view class="box_status">
			<view class="box_status_zt">
				<image v-if="info.status == 0" :src="imgHost+'/dingchang_ic_daizhifu.png'"></image>
				<image v-if="info.status == 3" :src="imgHost+'/dingchang_ic_shiyongzhong.png'">
				</image>
				<image v-if="info.status == 1 || info.status == 2 || info.status == 4 || info.status == 5"
					:src="imgHost+'/dingchang_ic_yiquxiao.png'"></image>
				<text v-if="info.status == 0">待支付</text>
				<text v-if="info.status == 1">超时未支付</text>
				<text v-if="info.status == 2">取消支付</text>
				<text v-if="info.status == 3">支付成功</text>
				<text v-if="info.status == 4">退款中</text>
				<text v-if="info.status == 5">退款成功</text>
			</view>
			<view class="box_status_info">
				<text>课程名称：<text class="box_status_info_h">{{info.courseName }}</text></text>
				<text>课程类目：<text class="box_status_info_h">{{info.items}}</text></text>
				<text v-if="info.classDate">开课日期：<text class="box_status_info_h">{{info.classDate}}</text></text>
				<text>报名人员：<text class="box_status_info_h" v-for="(item, index) in info.studentList"
						:key="index">{{item.name}} {{item.age?' |' + item.age+'岁；':''}}</text></text>
				<text>上课地点 ：<text class="box_status_info_h">{{info.site}}</text></text>
				<text>联系人姓名：<text class="box_status_info_h">{{info.userName}}</text></text>
				<text>联系人手机号 ：<text class="box_status_info_h">{{info.userPhone }}</text></text>
			</view>
		</view>
		<!-- 订单信息 -->
		<view class="box_xx">
			<view class="box_xx_title">订单信息</view>
			<text>订单编号：{{info.orderId}}</text>
			<text>创建时间：{{info.createTime}}</text>
			<!-- 	<text>有效期：{{ info.termNum && info.termType ?info.termNum:'' }}{{ info.termNum && info.termType && info.termType == "0" ? '年': info.termNum && info.termType && info.termType == "1" ? '月': info.termNum && info.termType && info.termType == "2" ? '日':'无' }}</text> -->
			<text v-if="info.price">实付价格：¥{{info.price}}</text>
			<text v-if="info.price">优惠金额：¥{{(Number(info.allPrice) - Number(info.price)).toFixed(2)}}</text>
			<text>订单总价：¥{{info.allPrice}}</text>
		</view>
		<!-- 底部展位 -->
		<view class="box_zw"></view>
		<!-- 底部支付 -->
		<view class="box_footer" v-if="info.status == 0 || info.status == 3">
			<view class="box_footer_left"><text>合计：</text><text>¥{{info.price|| info.price === 0? info.price: info.allPrice}}</text></view>
			<view class="flex">
				<view class="box_footer_right" style="border: 1px solid #999999; color: #999999;"
					@click="$noMultipleClicks(open)">{{info.status == 3?'课程退订':'取消支付'}}</view>
				<!-- <view v-if="info.status == 0" class="box_footer_right ml2" @click="pay">立即支付</view> -->
			</view>
		</view>
		<!-- 删除订单弹框 -->
		<u-overlay :show="show">
			<view class="wrapper">
				<view class="block">
					<view class="block_title">提示</view>
					<view class="block_info">{{info.status == 3?'是否退订此订单':'是否确定取消此订单'}}</view>
					<view class="block_footer">
						<view class="block_footer_a" @click="onClickHide">取消</view>
						<view class="block_footer_b" @click="$noMultipleClicks(deleBooking)">确定</view>
					</view>
				</view>
			</view>
		</u-overlay>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				noClick: true,
				id: '',
				info: {},
				show: false
			}
		},
		onLoad(ops) {
			this.id = ops.id
			this.getDetail()
		},
		methods: {
			jump(url, params, a) {
				this.$app.jump(url, params, a);
			},
			jump2(url, params, a) {
				this.$app.jump2(url, params, a);
			},
			open() {
				this.show = true
			},
			onClickHide() {
				this.show = false
			},
			deleBooking() {
				this.$app.ajax({
					api: this.$api.noEnrollCourse(),
					data: {
						userId: this.userInfo.id,
						param: {
							orderId: this.id
						}
					}
				}).then((res) => {
					if (res.errorCode === '000000') {
						this.show = false
						if (this.info.status == 3) {
							this.$app.showToast('退订成功')
						} else {
							this.$app.showToast('取消成功')
						}
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							})
						}, 100)
					}
				}).catch(() => {})
			},
			pay() {
				this.jump('/pages/order/pay?type=2&payOrder=1&orderId=', this.id)
			},
			getDetail() {
				this.$app.ajax({
					api: this.$api.curriculumDdDetails(),
					data: {
						userId: this.userInfo.id,
						param: {
							orderId: this.id
						}
					}
				}).then((res) => {
					if (res.errorCode === '000000') {
						this.info = res.record
					} else {
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							})
						}, 500)
					}
				}).catch(() => {})
			}

		}

	}
</script>


<style scoped lang="scss">
	.box_status {
		padding: 30rpx;
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		background: #ffffff;

		.box_status_zt {
			display: flex;
			align-items: center;
			flex-direction: column;
			margin-bottom: 60rpx;

			image {
				width: 140rpx;
				height: 140rpx;
			}

			text {
				&:nth-child(2) {
					font-size: 34rpx;
					font-weight: 500;
					color: #222222;
					margin-top: 20rpx;
				}

				&:nth-child(3) {
					font-size: 28rpx;
					font-weight: 400;
					color: $color;
					margin-top: 20rpx;
				}
			}
		}

		.box_status_info {
			display: flex;
			flex-direction: column;

			text {
				font-size: 28rpx;
				font-weight: 400;
				color: #666666;
				margin-top: 30rpx;

				&:nth-child(1) {
					margin-top: 0 !important;
				}
			}

		}

		.box_status_info_h {
			font-size: 28rpx !important;
			font-weight: 400 !important;
			color: #333333 !important;
		}
	}



	.box_xx {
		padding: 30rpx;
		box-sizing: border-box;
		margin-top: 24rpx;
		background: #ffffff;
		display: flex;
		flex-direction: column;

		text {
			font-size: 24rpx;
			font-weight: 400;
			color: #333333;
			margin-top: 20rpx;
		}

		.box_xx_title {
			font-size: 32rpx;
			font-weight: 500;
			color: #222222;
		}
	}

	.box_footer {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 130rpx;
		background: #ffffff;
		padding: 30rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.box_footer_left {
			display: flex;
			align-items: center;

			text {
				&:nth-child(1) {
					font-size: 28rpx;
					font-weight: 400;
					color: #222222;
				}

				&:nth-child(2) {
					font-size: 32rpx;
					font-weight: 600;
					color: $color;
				}
			}
		}

		.box_footer_right {
			width: 180rpx;
			height: 68rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 36rpx;
			border: 1rpx solid $color;
			font-size: 28rpx;
			font-weight: 400;
			color: $color;
		}
	}

	.box_zw {
		height: 130rpx;
	}
</style>